<!--
 * @Description  : 地图
 * @Author       : zhao
 * @Date         : 2022-10-19 14:10:58
 * @LastEditors  : zhao
 * @LastEditTime : 2022-11-03 16:24:26
-->
<!--  -->
<template>
	<div class="mapCon" :id="mapId"></div>
</template>

<script>
import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
// import OSM from "ol/source/OSM";
import XYZ from 'ol/source/XYZ';
import { defaults } from 'ol/interaction';
export default {
	name: 'zmap',
	data() {
		return {
			map: null, //地图实例
		};
	},
	props: {
		mapData: {
			//地图渲染数据
			type: Object,
			default: () => ({ center: [116.394926, 39.9125], zoom: 10 }),
			default: () => ({ center: [116.394926, 39.9125], zoom: 10 }),
		},
		mapId: String,
	},
	components: {},

	computed: {},

	mounted() {
		this.init();
	},

	methods: {
		init() {
			// this.mapPoint = this.MapParameter.mapPoint
			const mapId = this.mapId;
			this.map = new Map({
				// controls: defaultControls().extend([overviewMapControl]),
				target: mapId,
				layers: [
					new TileLayer({
						source: new XYZ({
							url: 'http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=' + this.$store.state.map.key,
							crossOrigin: 'anonymous',
							opaque: 'true',
						}),
					}),

					new TileLayer({
						source: new XYZ({
							url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=' + this.$store.state.map.key,
							crossOrigin: 'anonymous',
						}),
					}),
				],

				view: new View({
					center: this.mapData.center,
					projection: 'EPSG:4326',
					zoom: this.mapData.zoom,
				}),
				interactions: new defaults({
					doubleClickZoom: false, //屏蔽双击放大事件
				}),
			});
		},
	},
};
</script>
<style lang='scss' scoped>
.mapCon {
	width: 100%;
	height: 100%;
}
</style>